import React ,{useState,useEffect,useRef}  from 'react'
import useMousePositions from '../hooks/useMousePositions';


const LikeButton: React.FC = ()=>{
  const [like,setlike] = useState(0)
  const likeRef = useRef(0)
  const domRef = useRef<HTMLInputElement>(null)
 const [on,setOn] = useState(true)
  const position = useMousePositions()

 useEffect(()=>{
   console.log('title effect is running');
   document.title = `点击了${like}次`
 },[like])

  useEffect(()=>{
    if( domRef && domRef.current){
      domRef.current.focus()
    }
  })
  function handleAlertClick(){
    setTimeout(()=>{
      alert("you click on " + likeRef.current)
    },3000)
  }
  return (
    <>
      <input type="text" ref={domRef}/>
      <h2>X:{position.x},Y:{position.y}</h2>
    <button onClick={()=>{setlike(like+1);likeRef.current++}}>
      {like}👍
    </button>

  <button onClick={handleAlertClick}>Alert!
    </button>
      </>
  )
}

export default LikeButton